<template>
  <div class="box-btn-common">
    <div v-for="(item, index) in btnData" :key="index" class="btn">
      <el-popover
        placement="right"
        trigger="hover"
        popper-class="toolbars-popover"
        v-model:visible="popoverVisibleList[index]"
        :teleported="false"
      >
        <template #reference>
          <div
            class="tool-item"
            :class="[item.name, item.isSelected ? 'tool-item-checked' : '']"
            @click="btnGroupClick(item, index)"
          >
            {{ item.text }}
          </div>
        </template>

        <!-- <FilterToolbox :visible="popoverVisibleList[index] && item.isSelected" :name="item.text" :popoverIndex="index"
          @close="closeHandler" @item_click="clickHandler">
        </FilterToolbox> -->
      </el-popover>
    </div>
  </div>

  <div style="width: 540px; pointer-events: auto; display: flex; flex-direction: column">
    下三个闸门高度
    <el-input
      v-model="btnData[10].value"
      @input="setMaxNumber"
      style="width: 54px"
      :max="15"
      type="text"
      placeholder="下左闸门高度"
    />
    <el-input
      v-model="btnData[11].value"
      @input="setMaxNumber"
      style="width: 54px"
      type="text"
      placeholder="下中闸门高度"
    />
    <el-input
      v-model="btnData[12].value"
      @input="setMaxNumber"
      style="width: 54px"
      type="text"
      placeholder="下右闸门高度"
    />
    四个闸门高度
    <el-input
      v-model="outfallList[0].numberValue"
      @input="setMaxNumber"
      style="width: 54px"
      type="text"
      placeholder="闸门1高度"
    />
    <el-input
      v-model="outfallList[1].numberValue"
      @input="setMaxNumber"
      style="width: 54px"
      type="text"
      placeholder="闸门2高度"
    />
    <el-input
      v-model="outfallList[2].numberValue"
      @input="setMaxNumber"
      style="width: 54px"
      type="text"
      placeholder="闸门3高度"
    />
    <el-input
      v-model="outfallList[3].numberValue"
      @input="setMaxNumber"
      style="width: 54px"
      type="text"
      placeholder="闸门4高度"
    />
    洪峰模拟最终目标进度
    <el-input
      v-model="moBiaoJinDu"
      @input="setMaxNumber"
      style="width: 54px"
      type="text"
      placeholder="洪峰模拟目标进度"
    />
    洪峰模拟初始化进度进度
    <el-input
      v-model="initJinDu"
      @input="setMaxNumber"
      style="width: 54px"
      type="text"
      placeholder="洪峰模拟目标进度"
    />
    流速
    <el-input
      v-model="liuSu"
      @input="setMaxNumber"
      style="width: 54px"
      type="text"
      placeholder="洪峰模拟目标进度"
    />
    第一段距离
    <el-input v-model="juli1" style="width: 54px" type="text" placeholder="" />
    第一段速度
    <el-input v-model="sudu1" style="width: 54px" type="text" placeholder="" />
    第二段距离
    <el-input v-model="juli2" style="width: 54px" type="text" placeholder="" />
    第二段速度
    <el-input v-model="sudu2" style="width: 54px" type="text" placeholder="" />
    第三段距离
    <el-input v-model="juli3" style="width: 54px" type="text" placeholder="" />
    第三段速度
    <el-input v-model="sudu3" style="width: 54px" type="text" placeholder="" />
    第四段距离
    <el-input v-model="juli4" style="width: 54px" type="text" placeholder="" />
    第四段速度
    <el-input v-model="sudu4" style="width: 54px" type="text" placeholder="" />
    第五段距离
    <el-input v-model="juli5" style="width: 54px" type="text" placeholder="" />
    第五段速度
    <el-input v-model="sudu5" style="width: 54px" type="text" placeholder="" />
  </div>
</template>

<script setup lang="ts">
// import { number } from 'echarts';
import {
  onBeforeUnmount,
  onMounted,
  ref,
  reactive,
  watch,
  nextTick,
  onUnmounted,
} from "vue";
import { resultBbox1, resultBbox } from "@/utils/homeAll";

const emit = defineEmits(["click", "close", "item_click"]);
let numberValue = ref(15);
const popoverVisibleList = ref([
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
]);
let moBiaoJinDu = ref(100);
let initJinDu = ref(-1);
let liuSu = ref(0.4);

let juli1 = ref(10);
let sudu1 = ref(1.5);
let juli2 = ref(15);
let sudu2 = ref(0.3);
let juli3 = ref(20);
let sudu3 = ref(1);
let juli4 = ref(30);
let sudu4 = ref(0.5);
let juli5 = ref(40);
let sudu5 = ref(5);
let outfallList = ref([
  // chuShuiKo:开水口 ，DangQianKaiShuiZhuangTai:当前开水状态[342749.46, 2647900.16, 122.69117187500001]
  {
    id: "闸门1",
    chuShuiKo: 0,
    DangQianKaiShuiZhuangTai: true,
    range: [342749.28, 2647980.32, 201.95533203125],
    infoTreeId: "08AABC05468A2361509C1A92ADB8C4DE",
    mistSprayId: "9B54CDB841809D33EBC939ABD9657776",
    shuiHuaID: "1965877F438949E99352D8B0E2175D40",
    objectName: "BP_Switch2",
    Bool: true,
    numberValue: 10,
    V: "CCACE5064207AEA99AF156AB6FB2F9BC",
    L: "250928B341089AEE50BD078F5738FF29",
    ViceBox: [342771.73, 2647899.84, 122.69117187500001],
  },
  {
    id: "闸门2",
    chuShuiKo: 1,
    DangQianKaiShuiZhuangTai: true,
    range: [342770.81, 2647980.32, 202.159140625],
    infoTreeId: "05F2F1544F88E238F4D7E8BE96390E96",
    mistSprayId: "9B54CDB841809D33EBC939ABD9657776",
    shuiHuaID: "08BF9E024C3034810F32EAAB6043A525",
    objectName: "BP_Switch3",
    Bool: true,
    numberValue: 15,
    V: "EFF5C9A14A2A7A257492D08265150468",
    L: "35FD7A884499A6413DC9029CE076ECD1",
    ViceBox: [342771.73, 2647899.84, 122.69117187500001],
  },
  {
    id: "闸门3",
    chuShuiKo: 2,
    DangQianKaiShuiZhuangTai: true,
    range: [342792.31, 2647979.36, 201.73445312500002],
    infoTreeId: "FB1E6DF34EB3DF170A6802BE7A34A47A",
    mistSprayId: "89CAC1294ED6EE2F9094F3A63B8D3E65",
    shuiHuaID: "AA6D9CFC499F6F92BD7119BF989B6226",
    objectName: "BP_Switch4",
    Bool: true,
    numberValue: 15,
    V: "828BCAE8467D91125463C29D975FF515",
    L: "7487BC1745A6726857D51992992B1570",
    ViceBox: [342771.73, 2647899.84, 122.69117187500001],
  },
  // /[342815.36, 2647980.64, 203.22908203125002]
  //
  {
    id: "闸门4",
    chuShuiKo: 3,
    DangQianKaiShuiZhuangTai: true,
    range: [342815.36, 2647980.64, 203.22908203125002],
    infoTreeId: "3F3B172442BA1ADC2F1F1E885FA39E18",
    mistSprayId: "89CAC1294ED6EE2F9094F3A63B8D3E65",
    shuiHuaID: "D2B9FA124C616E4FC58E40BEF6944D41",
    objectName: "BP_Switch_4",
    Bool: true,
    numberValue: 15,
    V: "204E1A704F87F8F3F13F6F9C71D3AE3D",
    L: "352CEBB14D5254ACBCDBABB8CFA7A5F4",
    ViceBox: [342771.73, 2647899.84, 122.69117187500001],
  },
]);
const btnData = reactive([
  {
    name: "water",
    text: "上水面升",
    isSelected: false,
    selectedText: "水行业",
  },
  {
    name: "water",
    text: "上水面降",
    isSelected: false,
    selectedText: "水行业",
  },
  {
    name: "water",
    text: "下水面升",
    isSelected: false,
    selectedText: "水行业",
  },
  {
    name: "water",
    text: "下水面降",
    isSelected: false,
    selectedText: "水行业",
  },
  {
    name: "CompEchart",
    text: "闸门1",
    isSelected: false,
    selectedText: "Echarts",
  },
  {
    name: "CompElementUI",
    text: "闸门2",
    isSelected: false,
    selectedText: "Element",
  },
  {
    name: "CompList",
    text: "闸门3",
    isSelected: false,
    selectedText: "列表项",
  },
  {
    name: "CompDtsMarker",
    text: "闸门4",
    isSelected: false,
    selectedText: "撒点",
  },
  {
    name: "闸门全部",
    text: "闸门全部",
    isSelected: false,
    selectedText: "CustObj",
  },
  {
    name: "洪峰模拟",
    text: "洪峰模拟",
    isSelected: false,
    selectedText: "DtsOther",
  },
  {
    name: "下左闸门",
    text: "下左闸门",
    isSelected: false,
    selectedText: "航线",
    kaiShuiKo: 4,
    ViceBox: [342759.37, 2647953.6, 167.68634765625],
    value: "6",
  },
  {
    name: "下中闸门",
    text: "下中闸门",
    isSelected: false,
    selectedText: "高度",
    kaiShuiKo: 5,
    ViceBox: [342781.19, 2647952.32, 167.68634765625],
    value: "6",
  },
  {
    name: "下右闸门",
    text: "下右闸门",
    isSelected: false,
    selectedText: "区域",
    kaiShuiKo: 6,
    ViceBox: [342803.21, 2647952.16, 167.68634765625],
    value: "6",
  },
  {
    name: "停止视角跟随",
    text: "停止视角跟随",
    isSelected: false,
    selectedText: "区域",
  },
  {
    name: "重置",
    text: "重置",
    isSelected: false,
    selectedText: "时间",
  },
]);

/**
 * 图标点击事件
 *
 * @param item
 * @param index
 */
let z: number = 0.5;
let times: any = null;
let declineTimes: any = null;
function setRise() {
  if (declineTimes || times) {
    clearInterval(declineTimes);
    clearInterval(times);
  }

  times = setInterval(() => {
    z -= 0.5;
    if (z <= -30) {
      clearInterval(times);
      return;
    }
    // 上水面
    __xapi.tileLayer.setLocation("19030FB94C80D1A48B30E7BA4A9839D9", [0, 0, z]);
    __xapi.tileLayer.setLocation("62C63EDE4F4D6EF3E5ABDE92B51E78A8", [0, 0, z + 203]);
  }, 100);
}
function setMaxNumber(event: any) {
  // let val = event
  if (event > 15) {
    numberValue.value = 15;
  }
}
function setDecline() {
  if (declineTimes || times) {
    clearInterval(declineTimes);
    clearInterval(times);
  }

  declineTimes = setInterval(() => {
    z += 0.5;
    if (z >= 0) {
      clearInterval(declineTimes);

      return;
    }
    // 上水面
    __xapi.tileLayer.setLocation("19030FB94C80D1A48B30E7BA4A9839D9", [0, 0, z]);
    __xapi.tileLayer.setLocation("62C63EDE4F4D6EF3E5ABDE92B51E78A8", [0, 0, z + 203]);
  }, 100);
}
// id,出水范围，喷水ID,喷雾ID
let XiaZ = 0.5;
let Xiatimes: any = null;
let XiadeclineTimes: any = null;
function XiasetRise() {
  // console.log(XiaZ,'XiaZ');
  if (XiadeclineTimes || Xiatimes) {
    clearInterval(XiadeclineTimes);
    clearInterval(Xiatimes);
  }

  Xiatimes = setInterval(() => {
    if (XiaZ <= -10.5) {
      clearInterval(Xiatimes);
      return;
    }
    XiaZ -= 0.5;
    // console.log(XiaZ, 'XiaZ');

    // 下水面
    console.log(XiaZ, "XiaZ");
    __xapi.tileLayer.setLocation("6AEEEA9644FABF1A69FCC5A76AC9062C", [0, 0, XiaZ + 3]);
    __xapi.tileLayer.setLocation("3696D3D445D12B847D15EF96EF8F37C4", [0, 0, XiaZ + 118]);
  }, 100);
}
function XiasetDecline() {
  if (XiadeclineTimes || Xiatimes) {
    clearInterval(XiadeclineTimes);
    clearInterval(Xiatimes);
  }

  XiadeclineTimes = setInterval(() => {
    if (XiaZ >= 0) {
      clearInterval(XiadeclineTimes);

      return;
    }
    XiaZ += 0.5;
    // 下水面
    console.log(XiaZ, "XiaZ");
    __xapi.tileLayer.setLocation("6AEEEA9644FABF1A69FCC5A76AC9062C", [0, 0, XiaZ + 1]);
    __xapi.tileLayer.setLocation("3696D3D445D12B847D15EF96EF8F37C4", [0, 0, XiaZ + 118]);
  }, 100);
}

// 闸门高度
function kaiZha(item: any, index: number) {
  let sin = item.numberValue / 19.25;
  // if (item.Bool) {

  // __xapi.misc.callBPFunction({
  //   objectName: item.objectName,
  //   functionName: "Rotate",
  //   parameters: [
  //     {
  //       paramType: BPFuncParamType.Float,
  //       paramValue: (Math.asin(sin) * 180) / Math.PI,
  //     },
  //     {
  //       paramType: BPFuncParamType.Bool,
  //       paramValue: item.Bool,
  //     },
  //   ],
  // });
  let lastIndex = "0" + (Number(index) + 1);
  console.log("BP_SluiceGateUp" + lastIndex);
  __xapi.misc.callBPFunction({
    objectName: "BP_SluiceGateUp" + lastIndex,
    functionName: "Rotation",
    parameters: [
      {
        paramType: BPFuncParamType.Float,
        paramValue: (Math.asin(sin) * 180) / Math.PI,
      },
    ],
  });
  // debugger
  // } else {
  //   __xapi.misc.callBPFunction({
  //     objectName: item.objectName,
  //     functionName: 'Rotate',
  //     parameters: [
  //       {
  //         "paramType": BPFuncParamType.Float, "paramValue": 15,
  //       },
  //       {
  //         "paramType": BPFuncParamType.Bool, "paramValue": true,
  //       }
  //     ]
  //   });
  //   debugger
  // }
  outfallList.value[index].Bool = !item.Bool;
}

async function zhaMen1(objOutfallItem: any) {
  // await __xapi.infoTree.show('91BCD8DB4911F090AFBB47B41789879B')

  // 闸门出水的蓝图函数先显示，再调用
  // UE流水效果
  if (objOutfallItem.numberValue <= 0) {
    await __xapi.infoTree.hide(objOutfallItem.V);
    await __xapi.misc.callBPFunction({
      objectName: "Dam_Gate_2",
      functionName: "GateOpen",
      parameters: [
        {
          paramType: BPFuncParamType.Int32,
          paramValue: objOutfallItem.chuShuiKo,
        },
        {
          paramType: BPFuncParamType.Bool,
          paramValue: false,

          // "paramType": BPFuncParamType.Bool, "paramValue": true,
        },
      ],
    });
    // 停止出水
    await __xapi.fluid.stopSource([
      {
        id: objOutfallItem.id,
        sources: [
          {
            id: objOutfallItem.id,
            active: false,
          },
          {
            id: objOutfallItem.id + "ViceBox",
            active: false,
          },
        ],
      },
    ]);
  } else {
    await __xapi.infoTree.show(objOutfallItem.V);
  }

  // outfallList.value[
  //   objOutfallItem.chuShuiKo
  // ].DangQianKaiShuiZhuangTai = !objOutfallItem.DangQianKaiShuiZhuangTai;
}
//获取当前日期函数
function getNowFormatDate() {
  let date = new Date(),
    obj = {
      year: date.getFullYear(), //获取完整的年份(4位)
      month: date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
      strDate: date.getDate(), // 获取当前日(1-31)
      week: "星期" + "日一二三四五六".charAt(date.getDay()), //获取当前星期几(0 ~ 6,0代表星期天)
      hour: date.getHours(), //获取当前小时(0 ~ 23)
      minute: date.getMinutes(), //获取当前分钟(0 ~ 59)
      second: date.getSeconds(), //获取当前秒数(0 ~ 59)
    };

  Object.keys(obj).forEach((key) => {
    if (obj[key] < 10) obj[key] = `0${obj[key]}`;
    // console.log(obj[key])
  });

  return `${obj.year}-${obj.month}-${obj.strDate} ${obj.hour}:${obj.minute}:${obj.second}`;
}
let ListTimes: any = null;

async function hfmn() {
  if (ListTimes) {
    console.log("ssssssssssssssssssss", ListTimes);
    clearInterval(ListTimes);
    // await __xapi.infoTree.hide("8376583347A119E157CE52AE9800546E");
    await __xapi.infoTree.show("EB91FEDA45F485A9EFD64B83751AFE4A");
  }
  // await __xapi.infoTree.show("8376583347A119E157CE52AE9800546E");
  await __xapi.infoTree.show("EB91FEDA45F485A9EFD64B83751AFE4A");
  //
  // __xapi.infoTree.show("EB91FEDA45F485A9EFD64B83751AFE4A");
  __xapi.misc.callBPFunction({
    objectName: "River_Controller_2",
    functionName: "SetCurrentRiver",
    parameters: [
      { paramType: 5, paramValue: "gh_yj_xy" }, //FOV
    ],
  });

  __xapi.misc.callBPFunction({
    objectName: "River_Controller_2",
    functionName: "SetBoardUpdate",
    parameters: [
      { paramType: 0, paramValue: true }, //FOV
    ],
  });

  __xapi.misc.callBPFunction({
    objectName: "River_5",
    functionName: "SetArmLength",
    parameters: [
      { paramType: 3, paramValue: 1200000 }, //FOV
    ],
  });

  __xapi.misc.callBPFunction({
    objectName: "River_Controller_2",
    functionName: "RiverProgressTo",
    parameters: [
      { paramType: 3, paramValue: 90.0 }, //Stop Progress
      { paramType: 3, paramValue: 0.1 }, //Speed
      { paramType: 3, paramValue: 0 }, //TargetProgress
      { paramType: 2, paramValue: 0 }, //Method
      { paramType: 0, paramValue: true }, //IgnoreCheckPoints
    ],
  });

  __xapi.misc.callBPFunction({
    objectName: "River_Controller_2",
    functionName: "IndicatorVisible",
    parameters: [
      { paramType: 0, paramValue: true }, //FOV
    ],
  });
  //设置视角跟随
  __xapi.misc.callBPFunction({
    objectName: "River_Controller_2",
    functionName: "FollowBoard",
  });
  //

  //设置跟随相机FOV
  await __xapi.misc.callBPFunction({
    objectName: "River_5",
    functionName: "SetCameraFOV",
    parameters: [
      {
        paramType: BPFuncParamType.Float,
        paramValue: 0,
      },
    ],
  });
  //分段控制演进速度
  await __xapi.misc.callBPFunction({
    objectName: "River_5",
    functionName: "SetCheckPoints",
    parameters: [
      {
        paramType: BPFuncParamType.Float,
        paramValue: Number(juli1.value),
      },
      {
        paramType: BPFuncParamType.Float,
        paramValue: Number(sudu1.value),
      },
      {
        paramType: BPFuncParamType.Float,
        paramValue: Number(juli2.value),
      },
      {
        paramType: BPFuncParamType.Float,
        paramValue: Number(sudu2.value),
      },
      {
        paramType: BPFuncParamType.Float,
        paramValue: Number(juli3.value),
      },
      {
        paramType: BPFuncParamType.Float,
        paramValue: Number(sudu3.value),
      },
      {
        paramType: BPFuncParamType.Float,
        paramValue: Number(juli4.value),
      },
      {
        paramType: BPFuncParamType.Float,
        paramValue: Number(sudu4.value),
      },
      {
        paramType: BPFuncParamType.Float,
        paramValue: Number(juli5.value),
      },
      {
        paramType: BPFuncParamType.Float,
        paramValue: Number(sudu5.value),
      },
    ],
  });
  // console.log([
  //   {
  //     paramType: BPFuncParamType.Float,
  //     paramValue: juli1.value,
  //   },
  //   {
  //     paramType: BPFuncParamType.Float,
  //     paramValue: sudu1.value,
  //   },
  //   {
  //     paramType: BPFuncParamType.Float,
  //     paramValue: juli2.value,
  //   },
  //   {
  //     paramType: BPFuncParamType.Float,
  //     paramValue: sudu2.value,
  //   },
  //   {
  //     paramType: BPFuncParamType.Float,
  //     paramValue: juli3.value,
  //   },
  //   {
  //     paramType: BPFuncParamType.Float,
  //     paramValue: sudu3.value,
  //   },
  //   {
  //     paramType: BPFuncParamType.Float,
  //     paramValue: juli4.value,
  //   },
  //   {
  //     paramType: BPFuncParamType.Float,
  //     paramValue: sudu4.value,
  //   },
  //   {
  //     paramType: BPFuncParamType.Float,
  //     paramValue: juli5.value,
  //   },
  //   {
  //     paramType: BPFuncParamType.Float,
  //     paramValue: sudu5.value,
  //   },
  // ]);

  //播放河流推进动画
  // await __xapi.misc.callBPFunction({
  //   objectName: "River_Controller_2",
  //   functionName: "RiverProgressTo",
  //   parameters: [
  //     //最终目标进度
  //     {
  //       paramType: BPFuncParamType.Float,
  //       paramValue: Number(moBiaoJinDu.value),
  //     },
  //     //推进速度
  //     {
  //       paramType: BPFuncParamType.Float,
  //       paramValue: Number(liuSu.value),
  //     },
  //     //覆写动画初始进度
  //     {
  //       paramType: BPFuncParamType.Float,
  //       paramValue: Number(initJinDu.value),
  //     }, //覆写动画初始进度
  //     {
  //       paramType: BPFuncParamType.Int32,
  //       paramValue: 0,
  //     },
  //     {
  //       paramType: BPFuncParamType.Bool,
  //       paramValue: false,
  //     },
  //   ],
  // });

  //设置视角跟随
  // await __xapi.misc.callBPFunction({
  //   objectName: "River_Controller_2",
  //   functionName: "FollowBoard",
  // });
  //设置洪峰目标进度
  /*  await __xapi.misc.callBPFunction({
    objectName: "River_5",
    functionName: "RiverProgressSet",
    //目标进度
    parameters: [
      {
        paramType: BPFuncParamType.Float,
        paramValue: 100,
      },
    ],
  });
*/
  // console.log(moBiaoJinDu.value, Number(initJinDu.value), 'initJinDu.value');

  await __xapi.misc.callBPFunction({
    objectName: "River_5",
    functionName: "WaveHeightTo",
    parameters: [
      {
        paramType: BPFuncParamType.Float,
        paramValue: 100,
      },
      {
        paramType: BPFuncParamType.Float,
        paramValue: -1,
      },
    ],
  });
  // __xapi.misc.callBPFunction({
  //   objectName: 'River_5',
  //   functionName: 'TextColorSet',
  //   parameters: [
  //     {
  //       "paramType": BPFuncParamType.Int32, "paramValue": 2,
  //     },
  //     {
  //       "paramType": BPFuncParamType.Vector, "paramValue": 'rgb(255,255,255)',
  //     },

  //   ]
  // });
  // await __xapi.misc.callBPFunction({
  //   objectName: "River_5",
  //   functionName: "TextColorSet",
  //   parameters: [
  //     {
  //       paramType: BPFuncParamType.Int32,
  //       paramValue: 3,
  //     },
  //     {
  //       paramType: BPFuncParamType.Vector,
  //       paramValue: "rgb(200,55,1)",
  //     },
  //   ],
  // });
  // // 显示的字
  // await __xapi.misc.callBPFunction({
  //   objectName: "River_5",
  //   functionName: "UpdateText",
  //   parameters: [
  //     {
  //       paramType: 2,
  //       paramValue: 0,
  //     },
  //     {
  //       paramType: 5,
  //       paramValue: "流量:162m³/s",
  //     },
  //     {
  //       paramType: 2,
  //       paramValue: 100,
  //     },
  //   ],
  // });
  // let i = 1;
  // ListTimes = setInterval(async () => {
  //   await __xapi.misc.callBPFunction({
  //     objectName: "River_5",
  //     functionName: "UpdateText",
  //     parameters: [
  //       {
  //         paramType: BPFuncParamType.Int32,
  //         paramValue: 1,
  //       },
  //       {
  //         paramType: BPFuncParamType.String,
  //         paramValue: `流量:${188 + i}m³/s`,
  //       },
  //       {
  //         paramType: BPFuncParamType.Int32,
  //         paramValue: 100,
  //       },
  //     ],
  //   });
  //   await __xapi.misc.callBPFunction({
  //     objectName: "River_5",
  //     functionName: "UpdateText",
  //     parameters: [
  //       {
  //         paramType: BPFuncParamType.Int32,
  //         paramValue: 2,
  //       },
  //       {
  //         paramType: BPFuncParamType.String,
  //         paramValue: `速度:${4 + i}km/h`,
  //       },
  //       {
  //         paramType: BPFuncParamType.Int32,
  //         paramValue: 100,
  //       },
  //     ],
  //   });
  //   await __xapi.misc.callBPFunction({
  //     objectName: "River_5",
  //     functionName: "UpdateText",
  //     parameters: [
  //       {
  //         paramType: BPFuncParamType.Int32,
  //         paramValue: 3,
  //       },
  //       {
  //         paramType: BPFuncParamType.String,
  //         paramValue: `${getNowFormatDate()}`,
  //       },
  //       {
  //         paramType: BPFuncParamType.Int32,
  //         paramValue: 100,
  //       },
  //     ],
  //   });
  //   ++i;
  // }, 500);

  // await __xapi.misc.callBPFunction({
  //   objectName: "River_5",
  //   functionName: "UpdateText",
  //   parameters: [
  //     {
  //       paramType: BPFuncParamType.Int32,
  //       paramValue: 4,
  //     },
  //     {
  //       paramType: BPFuncParamType.String,
  //       paramValue: "",
  //     },
  //     {
  //       paramType: BPFuncParamType.Int32,
  //       paramValue: 100,
  //     },
  //   ],
  // });
  // // 面板位置相对位移
  // await __xapi.misc.callBPFunction({
  //   objectName: "River_5",
  //   functionName: "IndicatorOffset",
  //   parameters: [
  //     {
  //       paramType: BPFuncParamType.Vector,
  //       paramValue: 0,
  //     },
  //   ],
  // });

  // // 设置相机长度距离 挪动以后，只要更新浪头动画就会相应的去挪动这个面板，比如向上10个单位
  // __xapi.misc.callBPFunction({
  //   objectName: "River_5",
  //   functionName: "SetArmLength",
  //   parameters: [
  //     {
  //       paramType: BPFuncParamType.Float,
  //       paramValue: 62000,
  //     },
  //   ],
  // });
}

async function setCollision(zhaVal: string) {
  let lastBoxWater = null;
  if (lastBoxWater) {
    clearTimeout(lastBoxWater);
    return;
  }
  let index = outfallList.value.findIndex((item) => {
    return item.id == zhaVal;
  });
  // 开闸动画特效

  // setTimeout(()=>{
  // outfallList.value[index].DangQianKaiShuiZhuangTai ? __xapi.infoTree.show(outfallList.value[index].L) : __xapi.infoTree.hide(outfallList.value[index].L)

  // },5000)

  await kaiZha(outfallList.value[index], index);
  let bbox = resultBbox1([342782.01, 2647997.7600000002, 234.21830078125]);

  let fluid = {
    id: outfallList.value[index].id,
    bbox: bbox,
    style: 20,
    sources: [
      {
        id: outfallList.value[index].id,
        // "rotation": [0, 0, 0],
        bbox: resultBbox(outfallList.value[index].range, 10, 30),
        velocity: [1, 0], // 可选参数 uv流向
        shape: 0, // 可选参数 取值范围：[0,1]，0矩形出水点，1圆形出水点
        duration: -1, // 可选参数  出水点仿真执行时间，单位：秒，
      },
    ],
  };
  let fluid1 = {
    id: outfallList.value[index].id + "ViceBox",
    bbox: bbox,
    style: 20,
    sources: [
      {
        id: outfallList.value[index].id + "ViceBox",
        // "rotation": [0, 0, 0],
        bbox: resultBbox(outfallList.value[index].ViceBox, 20, 1),
        velocity: [0, 9], // 可选参数 uv流向
        shape: 1, // 可选参数 取值范围：[0,1]，0矩形出水点，1圆形出水点
        duration: -1, // 可选参数  出水点仿真执行时间，单位：秒，
      },
    ],
  };
  // 水流动特效
  await zhaMen1(outfallList.value[index]);
  await __xapi.fluid.add(fluid1);
  if (outfallList.value[index].numberValue > 0) {
    await __xapi.fluid.add(fluid);

    let objOutfallItem = outfallList.value[index];
    await __xapi.fluid.continueSource({
      id: objOutfallItem.id,
      sources: [
        {
          id: objOutfallItem.id,
          active: true,
        },
      ],
    });
  }

  lastBoxWater = setTimeout(async () => {
    // outfallList.value[index].numberValue<=0
    //   ? await __xapi.infoTree.hide(outfallList.value[index].L)
    //   : await __xapi.infoTree.show(outfallList.value[index].L);
    if (outfallList.value[index].numberValue <= 0) {
      await __xapi.infoTree.hide(outfallList.value[index].L);
    } else {
      await __xapi.infoTree.show(outfallList.value[index].L);
    }
    await __xapi.fluid.continueSource({
      id: outfallList.value[index].id + "ViceBox",
      sources: [
        {
          id: outfallList.value[index].id + "ViceBox",
          active: outfallList.value[index].numberValue > 0 ? true : false,
        },
      ],
    });
  }, 5000);
}
async function reset() {
  for (let index = 0; index < outfallList.value.length; index++) {
    // const item = outfallList.value[index];
    // console.log('222222')
    // __xapi.misc.callBPFunction({
    //   objectName: item.objectName,
    //   functionName: "Rotate",
    //   parameters: [
    //     {
    //       paramType: BPFuncParamType.Float,
    //       paramValue: 0,
    //     },
    //     {
    //       paramType: BPFuncParamType.Bool,
    //       paramValue: true,
    //     },
    //   ],
    // });
    let lastIndex = "0" + (Number(index) + 1);
    await __xapi.misc.callBPFunction({
      objectName: "BP_SluiceGateUp" + lastIndex,
      functionName: "Rotation",
      parameters: [
        {
          paramType: BPFuncParamType.Float,
          paramValue: 0,
        },
      ],
    });
  }
  // __g.reset();

  // __xapi.fluid.stopSource([{
  //   id: "闸门1",
  //   "sources": [
  //     {
  //       "id": "闸门1",
  //       "active": false,
  //     }]
  // }]);
}
async function btnGroupClick(item: any, index: number) {
  if (item.text == "上水面降") {
    await __xapi.camera.set(342850.46875, 2648087.25, 228.483574, -4.028288, 143.892212);

    setRise();
  } else if (item.text == "上水面升") {
    await __xapi.camera.set(342850.46875, 2648087.25, 228.483574, -4.028288, 143.892212);
    setDecline();
  }
  if (item.text == "下水面降") {
    await __xapi.camera.set(342797.96875, 2647739.75, 170.776621, -21.175367, 70.151421);
    XiasetRise();
  } else if (item.text == "下水面升") {
    await __xapi.camera.set(342797.96875, 2647739.75, 170.776621, -21.175367, 70.151421);
    XiasetDecline();
  }
  if (
    item.text == "闸门1" ||
    item.text == "闸门2" ||
    item.text == "闸门3" ||
    item.text == "闸门4"
  ) {
    await __xapi.infoTree.show("91BCD8DB4911F090AFBB47B41789879B");

    __xapi.camera.set(342692.673516, 2647726.691953, 297.89459, -24.513821, -63.884094);

    await setCollision(item.text);
  }
  if (item.text == "洪峰模拟") {
    hfmn();
  }
  if (item.text == "停止视角跟随") {
    __xapi.camera.get(function (res: any) {
      // console.log(
      //   "This is the output information of the callback function of camera.get, which can be reset to the current position by the following code:\n"
      // );
      let str = `__xapi.camera.set(${res.x}, ${res.y}, ${res.z}, ${res.pitch}, ${res.yaw}, 0);\n`;
      console.log(str);
      __xapi.camera.set(res.x, res.y, res.z, res.pitch, res.yaw, 0);
    });
    __xapi.misc.callBPFunction({
      objectName: "River_5",
      functionName: "PossessDefaultPawn",
    });
    clearInterval(ListTimes);
    // __xapi.camera.set(342526.719844, 2647400.89542, 297.89459, -24.513821, -46.031483,1)
  }
  if (item.text == "闸门全部") {
    await __xapi.infoTree.show("91BCD8DB4911F090AFBB47B41789879B");
    __xapi.camera.set(342692.673516, 2647726.691953, 297.89459, -24.513821, -63.884094);

    await setCollision("闸门2");

    await setCollision("闸门3");
    await setCollision("闸门1");
    await setCollision("闸门4");
    await xiaZhaMen(btnData[10], 10);
    await xiaZhaMen(btnData[11], 11);
    await xiaZhaMen(btnData[12], 12);
  }
  if (item.name == "下左闸门" || item.name == "下中闸门" || item.name == "下右闸门") {
    xiaZhaMen(item, index);
  }
  if (item.text == "重置") {
    await __xapi.infoTree.hide("8376583347A119E157CE52AE9800546E");
    await reset();
  }
}
async function xiaZhaMen(item: any, index: any) {
  if (item.text == "下左闸门") {
    // console.log(item, "item");
    // __xapi.infoTree.show('AD64FD8144DA60D3CA6539BCED67F916')

    btnData[index].isSelected = !btnData[index].isSelected;
    // console.log(btnData[index].isSelected, 'btnData[index].isSelected');
    __xapi.misc.callBPFunction({
      objectName: "BP_SluiceGateDown01",
      functionName: "Rotation",
      parameters: [
        {
          paramType: BPFuncParamType.Float,
          paramValue: (Math.asin(btnData[10].value / 9.25) * 180) / Math.PI,
        },
      ],
    });
    if (btnData[10].value > 0) {
      __xapi.infoTree.show("D51B4B32468A7D5921046BB09C49A99F");
      // __xapi.infoTree.show("A77118B44436FBF2ED3028B3B8475B0A");
      // __xapi.infoTree.hide("00600D73459C73E646A3CD80AAF6A9B9");
      // __xapi.infoTree.hide("3C0378044903085511E3A6B914F92170");
      let bbox = resultBbox1([342782.01, 2647997.7600000002, 234.21830078125]);
      let fluid = {
        id: "fluid" + index,
        bbox: bbox,
        style: 20,
        sources: [
          {
            id: "fluid" + index,
            // "rotation": [0, 0, 0],
            bbox: resultBbox(btnData[index].ViceBox, 5, 15),
            velocity: [0, 0], // 可选参数 uv流向
            shape: 1, // 可选参数 取值范围：[0,1]，0矩形出水点，1圆形出水点
            duration: -1, // 可选参数  出水点仿真执行时间，单位：秒，
          },
        ],
      };
      __xapi.fluid.add(fluid);
      await __xapi.fluid.continueSource({
        id: "fluid" + index,
        sources: [
          {
            id: "fluid" + index,
            active: true,
          },
        ],
      });
      // let sin = item.numberValue / 19.25;
      // if (item.Bool) {

      // __xapi.misc.callBPFunction({
      //   objectName: item.objectName,
      //   functionName: "Rotate",
      //   parameters: [
      //     {
      //       paramType: BPFuncParamType.Float,
      //       paramValue: (Math.asin(sin) * 180) / Math.PI,
      //     },
      //     {
      //       paramType: BPFuncParamType.Bool,
      //       paramValue: item.Bool,
      //     },
      //   ],
      // });
      // let lastIndex = "0" + (Number(0) + 1);
      // console.log("BP_SluiceGateDown" + lastIndex,(Math.asin(10/ 19.25) * 180) / Math.PI);
    } else {
      __xapi.fluid.stopSource([
        {
          id: "fluid" + index,
          sources: [
            {
              id: "fluid" + index,
              active: false,
            },
          ],
        },
      ]);
      __xapi.infoTree.hide("D51B4B32468A7D5921046BB09C49A99F");
      // __xapi.infoTree.show("00600D73459C73E646A3CD80AAF6A9B9");
      // __xapi.infoTree.hide("A77118B44436FBF2ED3028B3B8475B0A");
      // __xapi.misc.callBPFunction({
      //   objectName: "BP_SluiceGateDown01",
      //   functionName: "Rotation",
      //   parameters: [
      //     {
      //       paramType: BPFuncParamType.Float,
      //       paramValue: (Math.asin(0 / 9.25) * 180) / Math.PI,
      //     },
      //   ],
      // });
    }
  }
  if (item.text == "下中闸门") {
    btnData[index].isSelected = !btnData[index].isSelected;
    // console.log(btnData[index].isSelected, 'btnData[index].isSelected');
    __xapi.misc.callBPFunction({
      objectName: "BP_SluiceGateDown02",
      functionName: "Rotation",
      parameters: [
        {
          paramType: BPFuncParamType.Float,
          paramValue: (Math.asin(btnData[11].value / 9.25) * 180) / Math.PI,
        },
      ],
    });
    if (btnData[11].value > 0) {
      __xapi.infoTree.show("4618E9564F2F98DE0AEEB3A460F59586");
      // __xapi.infoTree.show("CB8C09C2484A8D3C17D2C0919D4BC998");
      // __xapi.infoTree.hide("7B4E59DD493CC2FD90FD948479805670");
      // __xapi.infoTree.hide("7874228B4F573C87EE2EB0B9207D9D17");

      let bbox = resultBbox1([342782.01, 2647997.7600000002, 234.21830078125]);
      let fluid = {
        id: "fluid" + index,
        bbox: bbox,
        style: 20,
        sources: [
          {
            id: "fluid" + index,
            // "rotation": [0, 0, 0],
            bbox: resultBbox(btnData[index].ViceBox, 5, 15),
            velocity: [0, 0], // 可选参数 uv流向
            shape: 1, // 可选参数 取值范围：[0,1]，0矩形出水点，1圆形出水点
            duration: -1, // 可选参数  出水点仿真执行时间，单位：秒，
          },
        ],
      };
      __xapi.fluid.add(fluid);
      await __xapi.fluid.continueSource({
        id: "fluid" + index,
        sources: [
          {
            id: "fluid" + index,
            active: true,
          },
        ],
      });
    } else {
      // __xapi.misc.callBPFunction({
      //   objectName: "BP_SluiceGateDown02",
      //   functionName: "Rotation",
      //   parameters: [
      //     {
      //       paramType: BPFuncParamType.Float,
      //       paramValue: (Math.asin(0 / 9.25) * 180) / Math.PI,
      //     },
      //   ],
      // });
      __xapi.fluid.stopSource([
        {
          id: "fluid" + index,
          sources: [
            {
              id: "fluid" + index,
              active: false,
            },
          ],
        },
      ]);
      __xapi.infoTree.hide("4618E9564F2F98DE0AEEB3A460F59586");
      // __xapi.infoTree.show("7B4E59DD493CC2FD90FD948479805670");
      // __xapi.infoTree.hide("CB8C09C2484A8D3C17D2C0919D4BC998");
    }
    await __xapi.misc.callBPFunction({
      objectName: "Dam_Gate_2",
      functionName: "GateOpen",
      parameters: [
        {
          paramType: BPFuncParamType.Int32,
          paramValue: item.kaiShuiKo,
        },
        {
          paramType: BPFuncParamType.Bool,
          paramValue: item.isSelected,
        },
      ],
    });
  }
  if (item.text == "下右闸门") {
    btnData[index].isSelected = !btnData[index].isSelected;
    // console.log(btnData[index].isSelected, 'btnData[index].isSelected');
    __xapi.misc.callBPFunction({
      objectName: "BP_SluiceGateDown03",
      functionName: "Rotation",
      parameters: [
        {
          paramType: BPFuncParamType.Float,
          paramValue: (Math.asin(btnData[12].value / 9.25) * 180) / Math.PI,
        },
      ],
    });
    if (btnData[12].value > 0) {
      __xapi.infoTree.show("A1FCA50B430CD7B86EA16BA90DA6C94A");
      // __xapi.infoTree.show("B49921C246520B1B2B689B9ADF06086F");
      // __xapi.infoTree.hide("E566A5304963F3F991F70F800F5C5624");
      // __xapi.infoTree.hide("A8F00F7040D0C324C711568D88E7F94B");

      let bbox = resultBbox1([342782.01, 2647997.7600000002, 234.21830078125]);
      let fluid = {
        id: "fluid" + index,
        bbox: bbox,
        style: 20,
        sources: [
          {
            id: "fluid" + index,
            // "rotation": [0, 0, 0],
            bbox: resultBbox(btnData[index].ViceBox, 5, 15),
            velocity: [0, 0], // 可选参数 uv流向
            shape: 1, // 可选参数 取值范围：[0,1]，0矩形出水点，1圆形出水点
            duration: -1, // 可选参数  出水点仿真执行时间，单位：秒，
          },
        ],
      };
      __xapi.fluid.add(fluid);
      await __xapi.fluid.continueSource({
        id: "fluid" + index,
        sources: [
          {
            id: "fluid" + index,
            active: true,
          },
        ],
      });
    } else {
      __xapi.fluid.stopSource([
        {
          id: "fluid" + index,
          sources: [
            {
              id: "fluid" + index,
              active: false,
            },
          ],
        },
      ]);
      __xapi.infoTree.hide("A1FCA50B430CD7B86EA16BA90DA6C94A");
      // __xapi.infoTree.show("E566A5304963F3F991F70F800F5C5624");
      // __xapi.infoTree.hide("B49921C246520B1B2B689B9ADF06086F");
      // __xapi.misc.callBPFunction({
      //   objectName: "BP_SluiceGateDown03",
      //   functionName: "Rotation",
      //   parameters: [
      //     {
      //       paramType: BPFuncParamType.Float,
      //       paramValue: (Math.asin(0 / 9.25) * 180) / Math.PI,
      //     },
      //   ],
      // });
    }
    await __xapi.misc.callBPFunction({
      objectName: "Dam_Gate_2",
      functionName: "GateOpen",
      parameters: [
        {
          paramType: BPFuncParamType.Int32,
          paramValue: item.kaiShuiKo,
        },
        {
          paramType: BPFuncParamType.Bool,
          paramValue: item.isSelected,
        },
      ],
    });
  }
}
watch(
  popoverVisibleList,
  (val) => {
    popoverVisibleList.value.forEach((item, index) => {
      if (item && !btnData[index].isSelected) {
        popoverVisibleList.value[index] = false;
      }
    });
  },
  {
    deep: true,
  }
);

// 关闭窗口
// function closeHandler(e: any) {
//   popoverVisibleList.value[e.popoverIndex] = false
//   emit('close', e)
// }

// 窗口点击
// function clickHandler(result: any) {
//   emit('item_click', result)
// }

onMounted(async () => {
  // 初始化闸门
  // for (let index = 0; index < outfallList.value.length; index++) {
  //   const item = outfallList.value[index];
  //   // console.log('222222')
  //   __xapi.misc.callBPFunction({
  //     objectName: item.objectName,
  //     functionName: 'Rotate',
  //     parameters: [
  //       {
  //         "paramType": BPFuncParamType.Float, "paramValue": 0,
  //       },
  //       {
  //         "paramType": BPFuncParamType.Bool, "paramValue": true,
  //       }
  //     ]
  //   });
  // }
  //  await reset()
});
onUnmounted(async () => {
  // 初始化闸门
  // for (let index = 0; index < outfallList.value.length; index++) {
  //   const item = outfallList.value[index];
  //   // console.log('222222')
  //   __xapi.misc.callBPFunction({
  //     objectName: item.objectName,
  //     functionName: 'Rotate',
  //     parameters: [
  //       {
  //         "paramType": BPFuncParamType.Float, "paramValue": 0,
  //       },
  //       {
  //         "paramType": BPFuncParamType.Bool, "paramValue": true,
  //       }
  //     ]
  //   });
  // }
  //  await reset()
});

onBeforeUnmount(() => {
  for (let index = 0; index < 4; index++) {
    __xapi.misc.callBPFunction({
      objectName: "Dam_Gate_2",
      functionName: "GateOpen",
      parameters: [
        {
          paramType: BPFuncParamType.Int32,
          paramValue: index,
        },
        {
          paramType: BPFuncParamType.Bool,
          paramValue: false,

          // "paramType": BPFuncParamType.Bool, "paramValue": true,
        },
      ],
    });
  }
});
</script>

<style lang="scss" scoped>
.box-btn-common {
  display: flex;
  pointer-events: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  // width: 16rem;
  background: #0d192c;
  box-sizing: border-box;
  padding: 1rem;

  .btn {
    pointer-events: all;
    width: 7rem;
    height: 2.5rem;
    cursor: pointer;

    &:not(:first-child) {
      margin-top: 0.8rem;
    }

    .tool-item {
      width: 7rem;
      height: 2.5rem;
      text-align: center;
      line-height: 2.5rem;
      font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
      font-weight: 400;
      font-size: 1.4rem;
      color: #bdbdbd;
      background: url("./assets/default_tool_bg.png") no-repeat 0 0 / 100% 100%;
    }

    .tool-item-checked {
      color: #34ebff;
      background: url("./assets/checked_tool_bg.png") no-repeat 0 0 / 100% 100% !important;
    }
  }

  :deep(.toolbars-popover) {
    border: none !important;
    padding: 0 !important;
    min-width: 10rem !important;
    width: fit-content !important;
    height: fit-content !important;
    background-color: transparent !important;
  }
}
</style>
